@(title: String)(message: String)

@main(title){
    @views.html.header.header("Carpool overview"){
        @views.html.header.bttn.options_menu_right()
    }
}{
<script src='@routes.Assets.at("javascripts/carpool_day/day_overview.js")' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href='@routes.Assets.at("stylesheets/carpool_overview.css")'/>

@Html(message)

<div data-role="tabs" id="tabs">
    <div data-role="navbar">
        <ul>
            <li><a href="#group_1" data-ajax="false" id="default">AQD</a></li>
            <li><a href="#group_2" data-ajax="false">Super awesome test groep</a></li>
        </ul>
    </div>
    <div id="group_1">
        <div class="group_day">
            <div class="group_day_header">
                <div>
                    <i class="fa fa-calendar"></i> <strong>Tomorrow</strong> Saturday February 22
                </div>

            </div>
            <div class="group_status_bar">
                <div class="no_car_bar">3 car seats needed</div>
            </div>

            <input type="button" value="Sign up" data-icon="plus">
            <ul>
                <li>Tom Geurtsen</li>
                <li>George Geurtsen</li>
                <li>Piet Piraat</li>
            </ul>

        </div>

        <div class="group_day">
            <div class="group_day_header"><i class="fa fa-calendar"></i> Sunday February 23</div>
            <div class="group_status_bar">
                <div class="group_status_car_bar"><strong>2</strong> seats left</div>
            </div>

            <input type="button" value="Sign up" data-icon="plus">
            <ul>
                <li>Tom Geurtsen</li>
                <li>Piet Piraat</li>
            </ul>
        </div>

        <div class="group_day">
            <div class="group_day_header"><i class="fa fa-calendar"></i> Monday February 24</div>
            <div class="group_status_bar">
                <!--<div class="group_status_car_bar">Piet Piraat: 2 seats left</div>-->
            </div>

            <input type="button" value="Sign up" data-icon="plus">
            <p>No sign ups</p>
        </div>
    </div>


    <div id="group_2">
        <div class="group_day">
            <div class="group_day_header">
                <div>
                    <i class="fa fa-calendar"></i> <strong>Tomorrow</strong> Saturday February 22
                </div>

            </div>
            <div class="group_status_bar">
                <div class="no_car_bar">3 car seats needed</div>
            </div>

            <input type="button" value="Sign up" data-icon="plus">
            <ul>
                <li>Tom Geurtsen</li>
                <li>George Geurtsen</li>
                <li>Piet Piraat</li>
            </ul>

        </div>

        <div class="group_day">
            <div class="group_day_header"><i class="fa fa-calendar"></i> Sunday February 23</div>
            <div class="group_status_bar">
                <div class="group_status_car_bar"><strong>2</strong> seats left</div>
            </div>

            <input type="button" value="Sign up" data-icon="plus">
            <p>No sign ups</p>
        </div>

        <div class="group_day">
            <div class="group_day_header"><i class="fa fa-calendar"></i> Monday February 24</div>
            <div class="group_status_bar">
                <!--<div class="group_status_car_bar">Piet Piraat: 2 seats left</div>-->
            </div>

            <input type="button" value="Sign up" data-icon="plus">
            <p>No sign ups</p>
        </div>
    </div>

</div>
}{
}